<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";
import { fetchGetPersonAllNumber } from "@/api/screen/person";
onMounted(() => {
  getGetPersonAllNumber()
})
let getNum = reactive([1, 2, 2, 2, 2]); // 比例
let getname = ['81人以上', '61-80人', '41-60人', '21-40人', '20人以下']; // 课程名
let getbl = reactive([25,15,15,10,40]); // 比例
// 获取学院数据
const getGetPersonAllNumber = async () => {
  const res = await fetchGetPersonAllNumber()
  let arrayItem1 = 0
  let arrayItem2 = 0
  let arrayItem3 = 0
  let arrayItem4 = 0
  let arrayItem5 = 0
  let total = 0
  res.data.forEach((item: any) => {
    if (item.nowNumber > 80) {
      arrayItem1++
    } else if (item.nowNumber > 60 && item.nowNumber <= 80) {
      arrayItem2++
    } else if (item.nowNumber > 40 && item.nowNumber <= 60) {
      arrayItem3++
    } else if (item.nowNumber > 20 && item.nowNumber <= 40) {
      arrayItem4++
    } else {
      arrayItem5++
    }
  })
  total = arrayItem1 + arrayItem2 + arrayItem3 + arrayItem4 + arrayItem5
  getNum = [arrayItem1, arrayItem2, arrayItem3, arrayItem4, arrayItem5]
  getbl = [arrayItem1 / total * 100, arrayItem2 / total * 100, arrayItem3 / total * 100, arrayItem4 / total * 100, arrayItem5 / total * 100]
}




let data: { name: any; }[] = [];
for (var i = 0; i < getname.length; i++) {
  data.push({ name: getname[i], value: getbl[i], num: getNum[i] })
}

let fontColor = ["#FAAD14", "#FF4D4F", "#8839F0", "#23D688", "#397EF0"];
let backgroundColor = ["#FFFBE6", "#FFF1F0", "#F1EBFF", "#E5FFF3", "#E5F3FF"];
var colorList = [{
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#FACB36' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#FCBE2E' // 100% 处的颜色
  }],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#FFA66A' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#EE607E' // 100% 处的颜色
  }],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#C478FA' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#5272FE' // 100% 处的颜色
  }],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#3ED89B' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#59EBD7' // 100% 处的颜色
  }],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#494CF3' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#2AB0FF' // 100% 处的颜色
  }],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
    offset: 0,
    color: '#F4E83F' // 0% 处的颜色
  }, {
    offset: 1,
    color: '#16A068' // 100% 处的颜色
  }],
}];
const option = reactive({
  legend: {
    type: "scroll",
    orient: 'vertical',
    height: '80%',
    left: '60%',
    top: 'center',
    //icon: "circle", //设置为圆，删除则为矩形
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 15,
    data: getname,
    formatter: function (name: string) {
      for (var i = 0; i < getname.length; i++) {
        if (name == data[i].name) {
          return '{name|' + name + '}{num|' + getNum[i] + '个}{value|' + getbl[i] + '%}'
        }
      }
    },
    textStyle: {
      rich: {
        name: {
          fontSize: 14,
          fontWeight: 400,
          width: 100,
          height: 20,
          padding: [0, 0, 0, 5],
          color: '#ccc',
          fontFamily: 'Source Han Sans CN-Regular',
        },
        num: {
          fontSize: 14,
          fontWeight: 500,
          height: 20,
          width: 50,
          align: 'left',
          color: '#FBFF11',
          fontFamily: 'Source Han Sans CN-Regular',
        },
        value: {
          fontSize: 14,
          fontWeight: 500,
          height: 20,
          width: 50,
          align: 'left',
          color: '#ccc',
          fontFamily: 'Source Han Sans CN-Regular',
        }
      }
    }

  },
  series: [{
    type: 'pie',
    radius: ['35%', '55%'],
    center: ["30%", "50%"],
    itemStyle: {
      shadowBlur: 8,
      shadowColor: "rgba(255, 255, 255, 0)",
      borderWidth: 2,
      borderColor: 'rgba(10,31,66)',
      color: function (params: { dataIndex: string | number; }) {
        return colorList[params.dataIndex]
      }
    },
    label: {
      formatter: (params: { name: any; value: any; }) => {
        let name = params.name;
        if (name == getname[0]) {
          return `{name0|${name}：${params.value}%}`
        } else if (name == getname[1]) {
          return `{name1|${name}：${params.value}%}`
        } else if (name == getname[2]) {
          return `{name2|${name}：${params.value}%}`
        } else if (name == getname[3]) {
          return `{name3|${name}：${params.value}%}`
        } else if (name == getname[4]) {
          return `{name4|${name}：${params.value}%}`
        }
      },
      rich: {
        name0: {
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          color: fontColor[0],
          backgroundColor: backgroundColor[0],
          padding: [9, 12, 6, 12],
          borderRadius: 100
        },
        name1: {
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          color: fontColor[1],
          backgroundColor: backgroundColor[1],
          padding: [9, 12, 6, 12],
          borderRadius: 100
        },
        name2: {
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          color: fontColor[2],
          backgroundColor: backgroundColor[2],
          padding: [9, 12, 6, 12],
          borderRadius: 100
        },
        name3: {
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          color: fontColor[3],
          backgroundColor: backgroundColor[3],
          padding: [9, 12, 6, 12],
          borderRadius: 100
        },
        name4: {
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          color: fontColor[4],
          backgroundColor: backgroundColor[4],
          padding: [9, 12, 6, 12],
          borderRadius: 100
        },
      }
    },
    labelLine: {
      show: false
    },
    data: data
  }
  ]
})
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>



<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
